<template>
  <div class="add-broadcast-content">
    <h4>语音播报编辑</h4>
    <div class="el-switch">
      <el-switch
        v-model="value1"
        active-text="启动"
        inactive-text="禁用"
      ></el-switch>
      <el-button
        type="primary"
        class="save-button"
        size="small"
        @click="savePageConfig"
        >保存</el-button
      >
    </div>
    <div class="broadcast-tab">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="配置变量" name="first">
          <add-variable
            :domData="domData"
            :varIsFreeze="varIsFreeze"
            @varSumArrFun="varSumArrFun"
          ></add-variable>
        </el-tab-pane>
        <!-- 配置区域 -->
        <el-tab-pane label="配置区域" name="second">
          <add-area
            :domData="domData"
            :areaIsFreeze="areaIsFreeze"
            :varSumArr="varSumArr"
          ></add-area>
        </el-tab-pane>
        <!-- <el-tab-pane label="页面描述" name="third">
          <el-form
            ref="curDescription"
            :model="curDescription"
            label-width="80px"
          >
            <el-form-item label="测试结果">
              <el-input
                type="textarea"
                v-model="curDescription.testResult"
                :disabled="desIsFreeze"
              ></el-input>
            </el-form-item>
            <el-form-item label="页面描述">
              <el-input
                type="textarea"
                v-model="curDescription.pageDescription"
                :disabled="desIsFreeze"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit1">保存</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane> -->
      </el-tabs>
    </div>
  </div>
</template>

<script>
import addVariable from './addVariable.vue'
import addArea from './addArea.vue'
import { setPageConfigApi } from "@/api/system/agingDesign"
import {getFileNameInAria} from '@/utils/fileName'
export default {
  name: "addBroadcastContent",
  components: { addVariable, addArea },
  props: {
    domData: {
      type: Object,
      default: {
        domTree: '',
        domText: '',
        domCount: '',
        xpath: ''
      }
    },
    varIsFreeze: {
      type: Boolean,
      default: true
    },
    areaIsFreeze: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    areaInfoStore () {
      return this.$store.state.saveAreaInfo.saveApiInfo
    }
  },
  data () {
    return {
      activeName: localStorage.getItem('tabActive'),
      value1: true,
      // desIsFreeze: true, 
      curDescription: {
        testResult: '',
        pageDescription: ''
      },
      pageConfigInfo: {},
      varSumArr: [],
      url: ''
    };
  },

  methods: {

    handleClick (tab, event) {
      const ariaIframe = document.getElementById('id-iframe-aria-ur1')
      ariaIframe.contentWindow.postMessage({
        code: 'UNFREEZE',
        fromAriaAdmin: true
      }, '*')
      localStorage.setItem('tabActive', tab.name)
    },
    varSumArrFun (value) {
      console.log('104', value);
      this.varSumArr = value
    },
    savePageConfig () {
      console.log('sssss');
      this.url = this.$store.state.saveAreaInfo.saveApiInfo.url
      this.$store.commit('setfileName', 'no')
      setPageConfigApi(this.areaInfoStore).then((res) => {
        console.log('保存', res);
        this.$message(res.msg)
      })
    }
    // onSubmit1 () {
    //   console.log('onSubmit1');
    // }
  }
}
</script>

<style scoped>
.add-broadcast-content {
  margin-top: 20px;
}
.demo-curAreaInfo {
  /* border: 1px solid #ccc; */
}
.broadcast-tab {
  padding-left: 30px;
  /* margin-top: -20px; */
  border: 1px solid #ccc;
}
h4 {
  margin-left: 30px;
}
.el-switch {
  margin: 10px 20px 20px 15px;
}
.save-button {
  float: right;
}
</style>